<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
    <script src="./../vue/vue.js"></script>
</head>
<body>

    <!-- 
        directive
        
        声明周期函数：
            bind: 绑定时
            inserted: 插入父节点时
            update: 


     -->

    <div id="app">
        <component-d v-focus></component-d>

    </div>

    

    <script>
        // Vue.directive('focus', {
        //     inserted: function(el,binding){
        //         console.log("binding",binding)
        //         el.focus()
        //     }
        // })

        // Vue.directive('on')

        // Vue.directive('focus', {
        //     inserted: function(e){
        //         e.focus
        //     }
        // })


        Vue.component('component-d', {
            template: `
                <div>
                    <div>{{ value }}</div>
                    <input id='input' type="text" v-model="value">
                </div>
            `,
            data: function() {
                return {
                    value: "niubi"
                }
            },
            methods: {

            },
            directives: {
                focus: {
                    inserted: function(el){
                        let input = document.getElementById('#input')
                        console.log("input", input)
                        input.focus()
                    }
                }
            }
        })



        Vue.directive("onone", {

            bind: function(el, binding){

                el.onClick = function(){
                    console.log("el.onclick")
                }
                console.log("bind", el, binding)
            },
            //
            inserted: function(el){
                console.log("注入后立即被调用", el)
            }
        })


        let vm = new Vue({
            el: "#app",
            data: {
                niubi:"牛逼"
            },
            methods: {
                onClickButton(){
                    console.log("onClickButton")
                },
                onClickButton2(){
                    console.log("onClickButton2")
                }
            },
        })

    </script>
    
</body>
</html>